<template>
   <section class="share">
       <section class="share-warrper">
  	<h2 class="share__h2title">玉都天光墟<span class="differ-color">上线啦！</span></h2>
  	<p class="share__ptag">一款为翡翠爱好者的APP</p>
  	<p class="share__text">把消息分享给5位好友<br/>邀请5位好友,你将100%获得以下其中一件礼物</p>
  	<div class="share__gift">
  	      <div class="gift-img" ref="slider'">
  	            <slider :goodsList="goodsList">
                        <div  v-for="item in goodsList" class="img-item">
  	                       <img :src="item.img" class="img" alt="图片">
                          </div>
                   </slider>
  		    </div>
  	     </div>
  	</div>
  	<div class="share__btn">
  	      <button class="btn get-gifts" v-show="sponsor==1 && receive==true" @click="getGifts">拆礼物</button>
  	      <button class="btn get-gifts" v-show="sponsor!=1" @click="openShowGift">帮Ta拆</button>
  	      <button class="btn" v-show="sponsor==1 && receive!=true" @click="checkLogistics">已领取</button>
  	      <button class="btn" :class="{'want-gifts':sponsor==1}" disabled="sponsor==1">我也要礼物</button>
  	</div>
  	<div class="share__rules">
  	      <h3 class="share__rules-h3title">活动规则</h3>
  	      <p class="person-num">已有<span>123</span>人领取</p>
  	</div>
  	<div class="bg2"></div>
  	<div class="share__helper">
                   <h3 class="share__helper-h3title">已有<span class="num">{{invitationNum}}</span>位好友帮忙拆礼物</h3>
  	      <ul class="share__helper-menu">
  		<li class="share__helper-list" v-for="item in helpList">
  		      <div class="list-left">
  			<img :src="item.img" alt="头像" class="list-left__img">
  			<p class="list-left__name">{{item.name}}</p>
  		      </div>
  		      <div class="list-right">
  			<p class="list-right__time">{{item.time}}</p>
  		      </div>
  		</li>
  	      </ul>
  	</div>
  	<div class="bg3">
           <img src="../common/images/bg3@2x.png" alt="图片"> 
    </div>
      <div class="fixed-b" @click="checkOrder" v-show='judgeRecive'>礼物已发货，请查看订单</div>
     </section>
       <!-- 帮忙拆礼物的弹窗 -->
     <dailog v-show="showGift" @close="closeDailog('showGift')">
     	<div class="help-alert">
                  <p class="help-alert__text">好兄弟!</p>
     	      <p class="help-alert__text">你已成功祝Ta一臂之力!</p>
     	      <p class="help-alert__text">官方Tips：记得让他也祝你一臂之力!</p>
     	      <button class="help-alert__btn common-btn">我也要礼物</button>
     	</div>
     </dailog>
     <!-- 分享弹窗 -->
     <dailog v-show="showShare" @close="closeDailog('showShare')">
     	<div class="share-alert">
     	      <h3 class="share-alert__h3title">你已经成功提交!</h3>
     	      <p class="f15 mgb-28">别忘记下载【玉都天光虚】,打开玉器买卖新大门!</p>
     	      <div class="share-alert__code">
     	      	<div class="code">
               <img src="../common/images/popup_erweima@2x.png" alt="图片"> 
              </div>
     	      </div>
     	      <p class="f12 mgt-24">长按上方图片识别二维码即可下载</p>
     	       <button class="share-alert__btn">分享给朋友</button>
     	</div>
     </dailog>
     <!-- 查看物流弹窗 -->
     <dailog v-show="showLogistics" @close="closeDailog('showLogistics')">
           <div class="logistics-alert" >
     	      <h3 class="logistics-alert__h3title mgb-82">您的礼物正在途中,请耐心等待</h3>
     	      <div class="logistics-alert__img">
     	      	<img src="../common/images/popup_wuliu@2x.png" alt="图片">
     	      </div>
     	      <button class="logistics-alert__btn" @click="goApp">查看物流</button>
           </div>
     </dailog>
     <!-- 邀请弹窗 -->
     <dailog v-show="showInvitation" @close="closeDailog('showInvitation')">
          <div class="invitation-alert logistics-alert" >
                <h3 class="logistics-alert__h3title mgb-64">抱歉，还差N个人帮忙才能领取礼物,快去邀请吧!</h3>
                <div class="invitation-alert__img">
                      <img src="../common/images/popup_yaoqing@2x.png" alt="图片">
                </div>
                <button class="logistics-alert__btn">继续邀请</button>
           </div>
     </dailog>
      <goapp ref="goAPP"></goapp>
      <m-form ref="form"></m-form>
   </section>
</template>
<script>
import Dailog from './dailog.vue'
import Goapp from './gotoapp.vue'
import Slider from './slider.vue'
import Form from './form.vue'
export default{
  props: {
    helpList: {
      type: Array,
      default: () => [
        {
          img: require('../common/images/tx1.png'),
          name: '微信名称1',
          time: '2017-12-12'
        },
        {
          img: require('../common/images/tx2.png'),
          name: '微信名称2',
          time: '2017-12-13'
        },
        {
          img: require('../common/images/tx3.png'),
          name: '微信名称3',
          time: '2017-12-14'
        },
        {
          img: require('../common/images/tx4.png'),
          name: '微信名称4',
          time: '2017-12-15'
        }]
    },
    goodsList: {
      type: Array,
      default: () => [
        {
          img: require('../common/images/good1.png'),
          name: '和氏璧'
        },
        {
          img: require('../common/images/good2.png'),
          name: '宝玉'
        },
        {
          img: require('../common/images/good3.png'),
          name: '黛玉'
        },
        {
          img: require('../common/images/good4.png'),
          name: '美玉'
        },
        {
          img: require('../common/images/good5.png'),
          name: '钗玉'
        }]
    }
  },
  data () {
    return {
      imgGroup: ['', '', '', '', ''],
      showGift: false,
      showShare: false,
      showLogistics: false,
      showInvitation: false,
      sponsor: 1,
      invitationNum: 3,
      receive: true,
    }
  },
  components: { dailog: Dailog, goapp: Goapp, slider: Slider,'m-form':Form },
  created () {
    this.judgeReceive()
  },
  mounted () {
    this.scrollDirect ()
  },
  methods: {
    // 判断用户是否下滑动
    scrollDirect () {
       //  var firstX = 0,firstY = 0,endX = 0,endY = 0,moveX,moveY;
       //  this.$refs.warrper.addEventListener("touchstart",function(e){
       //    firstX = e.touches[0].clientX;
       //    firstY = e.touches[0].clientY;
       //   })
       // this.$refs.warrper.addEventListener("touchmove",function(e){
       //   endX =  e.touches[0].clientX;
       //   endY =  e.touches[0].clientY;
       //   moveX = endX - firstX;//判断左右
       //   moveY = endY - firstY;//判断上下
       //  if(Math.abs(moveX) > 60 || Math.abs(moveY) > 60){//判断是滑动，不是点击
       //    if (Math.abs(moveY) > Math.abs(moveX) && moveY > 0) {
       //         document.getElementsByTagName('body')[0].style.position = 'fixed'
       //      }
       //    }
       //  })
    },
    openShowGift () {
      this.showGift = !this.showGift
      this.stopBodyScroll(this.showGift)
    },
    // 关闭弹窗
    closeDailog (attr) {
      this[attr] = false
      this.stopBodyScroll(this[attr])
    },
    // 拆礼物
    getGifts () {
      if (this.invitationNum === 5) {
        this.showInvitation = !this.showInvitation
        this.stopBodyScroll(this.showInvitation)
      } else {
        // this.$refs.warrper.style.top = window.scrollY + 'px'
        // this.$refs.warrper.style.position=  'absolute'
        this.$refs.form.openForm ()
        // this.stopBodyScroll(this.showInfo)
      }
    },
    // 查看物流
    checkLogistics () {
      this.showLogistics = !this.showLogistics
      this.stopBodyScroll(this.showLogistics)
    },
    // 查看物流之后跳转到app
    goApp () {
      this.showLogistics = !this.showLogistics
      this.stopBodyScroll(this.showLogistics)
      this.$refs.goAPP.dowoloadApp()
    },
    checkOrder () {
      this.$refs.goAPP.dowoloadApp()
    },
    // 刷新判断是否领取
    judgeReceive () {
      let getRecordSubmit = localStorage.getItem('recordSubmit')
      if (getRecordSubmit) {
        this.receive = !this.receive
      }
    },
    // 隐藏背景滚动
    stopBodyScroll (isFixed) {
      let bodyDom = document.getElementsByTagName('body')[0]
      var top = 0
      var h=window.clientHeight
      console.log(h)
      if (isFixed) {
        top = window.scrollY
        bodyDom.style.position = 'fixed'
        bodyDom.style.top = -top + 'px'
        bodyDom.style.width = 100+ '%'
        bodyDom.style.width = h+ 'px'
      } else {
        bodyDom.style.position = ''
        bodyDom.style.top = '' 
        window.scrollTo(0, top)    
      }
      
    }
  },
  computed: {
    judgeRecive () {
      let getRecordSubmit = localStorage.getItem('recordSubmit')
      if (!this.receive || getRecordSubmit) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style lang="less">
@import '../common/style/share.less';	
</style>